<template>
  <div class="comment">
    <h3 class='border-bottom'>用户评论</h3>
    <div class="comment-container border-bottom" v-for="(comments,i) in commentInfo">
      <p class="comment-desc">{{comments.desc}}</p>
      <div class='comment-item' @click="">
        <img v-for="(img,index) in comments.imgs" :src="img"
             class='comment-img' v-if="index < 6" @click="lookImgs(i)">
        <span class='img-amount' >共{{comments.imgs.length}}张</span>
      </div>
    </div>
		<common-gallary @closeImgs="closeImgs" v-show="isShow" :gallaryImgs="gallaryImgs" ></common-gallary>
  </div>
	
</template>

<script>
	import CommonGallary from 'common/Gallary'
export default {
	name:'LikeComment',
	props:['commentInfo'],
	data(){
		return {
			isShow: false,
			gallaryImgs: []
		}
	},
	components:{
		CommonGallary
	},
	methods:{
		lookImgs(i){
			this.isShow = true
			this.gallaryImgs = this.commentInfo[i].imgs
			console.log(this.gallaryImgs)
		},
		closeImgs(){
			this.isShow = false
		}
	}
}
</script>

<style lang='stylus' scoped>
  .border-bottom::before
    border-color:#ccc
  h3
    line-height:.8rem
    padding-left:.3rem
    font-size:.3rem
  .comment-container
    padding:0 .2rem .4rem
    line-height: .42rem;
    font-size: .26rem;
    color: #616161
    .comment-desc
      overflow:auto
      height:2rem
      padding:.2rem 0
    .comment-item
      position:relative
      overflow: hidden
      .comment-img
        float:left
        width:32%
        margin-right:1.2%
        margin-bottom:1.2%
    .img-amount
      position:absolute
      right:.1rem
      bottom:.3rem
      padding:0 .05rem
      font-size:.28rem
      color:#fff
      border-radius:.2rem 0 0 .2rem
      background-color:rgba(0,0,0,.5)
</style>
